import React, { Component, useState } from "react"
import './login.css'
import { Input, List } from 'antd-mobile'
import bg from '../../../static/images/loginBg.jpg'
import api from "../../../api/index"
import { connect } from "react-redux";
import { useNavigate } from "react-router-dom"


function Login(props){
    const navigate = useNavigate();
    let [username, setUsername] = useState('');
    let [password, setPassword] = useState('');

    async function sureLogin() {
        // console.log(username, password);
        let user = {
            username,
            password
        }
        let { mine: {getLogin } } = api
        let { meta: {status} } = await getLogin(user)
        // console.log(res);
        if( status == 200 ) {
            props.setUser(username)
            navigate('/home')
        }

    }
    function setUser(e) {
        setUsername((username = e))
    }
    function setPass(e) {
        setPassword((password = e))
    }
    return (
        <div className="loginBox">
            <img src={bg} alt="" />
            <div className="contentBox">
                <Input placeholder='用户名/手机号/邮箱' onChange={setUser} clearable style={{'--placeholder-color': '#999'}} />
                <Input placeholder='密码' onChange={setPass} clearable type='password' style={{'--placeholder-color': '#999'}} />
                <div className="btn">
                    <button>忘记密码</button>
                    <button onClick={sureLogin}>登录</button>
                </div>
            </div>
        </div>
    );
    
}
 

const mapStateToProps = state => {
    return {
        username: state.username,
        ...state
    };
};
const mapDispatchToProps =(dispatch,oldProps) => {
    return {
        setUser: (data) => {
            // 真正触发修改redux值
            console.log(data);
            
            return dispatch({ type: "setUser", payload: data })
        }
    }

};

export default connect(mapStateToProps, mapDispatchToProps)(Login);